<template>
    <div class="main">
        <div class="chat" ref="chatRef"></div>
    </div>
</template>
<script setup>
import { onBeforeUnmount, onMounted, reactive, ref, nextTick } from 'vue';
import * as echarts from 'echarts'
import request from '/@/utils/request'
import { chunk } from 'lodash'
const state = reactive({
    data: ''
})
const chatRef = ref()
let chatDistance;
const lineStyle = (color, areaColor) => {
    return {
        type: 'line',
        smooth: false,
        lineStyle: {
            color,
            width: 2
        },
        itemStyle: {
            color,
        },
        // symbol: 'emptyCircle',
        symbolSize: 0,
        // areaStyle: {
        //     color: areaColor
        // }
    }
}
const colorsMap = [
    {
        color: 'rgba(4, 206, 204, 1)',
        linear: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(55, 255, 206, 1)' },
            { offset: 1, color: 'rgba(55, 255, 206, 0)' }
        ])
    },
    {
        color: 'rgba(255, 195, 0, 1)',
        linear: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(53, 255, 244, 0.30)' },
            { offset: 1, color: 'rgba(53, 255, 244, 0)' }
        ])
    },
    {
        color: '#FDC835',
        linear: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(253, 200, 53, 0.3)' },
            { offset: 1, color: 'rgba(0,255,191,0)' }
        ])
    }
]
const initChat = () => {
    if (chatDistance) return;
    chatDistance = echarts.init(chatRef.value);

    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999',
                },
            },
        },
        legend: {
            show: true,
            right: 110,
            top: 5,
            icon: 'rect',
            textStyle: {
                color: '#fff'
            }
        },
        grid: {
            top: 56,
            left: 30,
            right: 10,
            bottom: 12,
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                axisPointer: {
                    type: 'line',
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#fff',
                    },
                    textStyle: {
                        color: '#fff'
                    },
                },
                axisTick: {
                    alignWithLabel: true
                },
                axisPointer: {
                    label: {
                        backgroundColor: 'rgba(0,0,0,0.3)'
                    }
                }
            },
        ],
        yAxis: [
            {
                type: 'value',
                name: '',
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: 'rgba(255, 255, 255, 1)'
                    }
                },
                axisLabel: {
                    color: '#fff'
                },
                axisLine: {
                    show: false,
                },
                // ...yAxisOption,
                minInterval: 1
            },
        ],
        series: [{
            name: '',
            type: 'line',
            ...lineStyle('#00FFBF', new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(0,255,191,0.3)' },
                { offset: 1, color: 'rgba(0,255,191,0)' }
            ]))
        }],
    };
    chatDistance.setOption(option)
    if (state.data) {
        setData()
    }
    window.addEventListener('resize', chartResize)
};
const chartResize = () => {
    chatDistance.resize()
}
// const getRandom = (min, max) => {
//     return Math.floor((Math.random() * (max - min + 1)) + min);
// }
const setData = () => {
    const { x, y } = state.data;
    chatDistance.setOption({
        xAxis: [
            {
                data: x
            },
        ],
        series: y.map((item, index) => {
            const style = colorsMap[index]
            return {
                type: 'line',
                name: item.name,
                ...lineStyle(style.color, style.linear),
                data: item.data
            }
        })
    })
    // 解决mounted获取元素尺寸不准确问题
    setTimeout(() => {
        chartResize()
    }, 1000);
}
const getData = () => {
    state.data = {
        x: ['11.1', '11.2', '11.3', '11.4', '11.5', '11.6', '11.7', '11.8', '11.9', '11.10'],
        y: [
            {
                name: '活跃人数',
                data: [100, 200, 300, 20, 30, 40, 50, 100, 120, 250],
            },
            {
                name: '活跃增量',
                data: [10, 20, 30, 2, 3, 4, 5, 10, 12, 25]
            }
        ]
    }
    if (chatDistance) {
        setData()
    }
    return
    // 以上是模拟数据，真是数据通过接口传入，如下
    request({
        url: 'analysisJudgment/getCategorize',
        method: 'post',
        data: {
        }
    }).then(res => {
        state.data = res;
        if (chatDistance) {
            setData()
        }
    })
}
onMounted(() => {
    getData()
    setTimeout(() => {
        initChat();
    }, 0);
});
onBeforeUnmount(() => {
    window.removeEventListener('resize', chartResize)
})
</script>
<style lang="scss" scoped>
.main {
    height: 100%;
    padding: 20px 20px 10px;
    box-sizing: border-box;
    position: relative;
    top: -52px;

    .chat {
        height: 100%;
    }
}
</style>